<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {

            width: 900px;
            height: 100px;
            line-height: 50px;
            margin: 50px auto 0 auto;
            border: 2px solid #a89d9d;
            border-radius: 0 20px 0 20px;
        }

        .box1 {
            color: #a89d9d;
            /* background-color: aqua; */
            height: 50px;
        }

        .box2 {
            /* background-color: pink; */
            height: 50px;
            justify-content: space-around;
            display: flex;
            flex-direction: row;
        }

        .box1>p {
            margin-left: 20px;
        }

        div p {
            color: #a89d9d;
            display: inline-block;
        }
    </style>
</head>

<body>
    <script>
        let obj = {
            goods: '小米(MI)',
            name: '小米10 青春版',
            num: 100012816024,
            weight: '0.55kg',
            address: '中国大陆'
        }
        obj.name = '小米10 PLUS'
        obj.color = '粉色'
        document.write(`<div class="box">
        <div class="box1">
            <p>品牌：${obj.goods}</p>
        </div>
        <div class="box2">
            <p>商品名称：${obj.name}</p>
            <p>商品编号：${obj.num}</p>
            <p>商品毛重：${obj.weight}</p>
            <p>商品产地：${obj.address}</p>
            <p>颜色：${obj.color}</p>
        </div>
    </div>`)

    </script>
</body>

</html>